<template>
	<view>
		<view style='width:100%'>
			<img src='https://picture.jmgc.vip/9d8d44ee-171c-4a4f-969a-a42f5a95dcdb.png' style='width:100%;height:auto'
				mode='widthFix'></img>
		</view>
		<view v-if="list.length === 0" style='margin-top:10vh'>
			<u-empty mode="list" text='您还没有仓储产品'>
			</u-empty>
		</view>
		<view v-else>
			<view class='list'>
				<view v-for='item in list' class='list-item'>
					<view class='image' @click='show = true'>
						<img src='/static/product.jpg' style='width:100%;height:auto' mode='widthFix' />
					</view>
					<view class='title'>1000斤</view>
				</view>
			</view>
		</view>
		<u-modal :show="show" :title="title" @confirm='show = false'>
			<view>
				<view class='code'>
				{{code}}
				</view>
				<view class='title'>
					请到仓库出示上面编码
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				show: false,
				title: '存储编码',
				code: ''
			}
		},
		onShow() {

		},
		methods: {

		}
	}
</script>

<style>
	.list {
		display: flex;
		flex-wrap: wrap;
	}

	.list-item {
		width: 20.5%;
		background-color: #fff;
		padding: 8px;
		overflow: hidden;
	}

	.image {
		background-color: antiquewhite;
		padding: 5px;
		border-radius: 5px;
		margin: auto;

	}

	.title {
		text-align: center;
		color: #909399;
		font-size: 14px;
	}
	
	.code{
		font-size: 18px;
		color:#303133;
		font-weight: bold;
		margin: 10px 0px;
		text-align: center;
	}
</style>